<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body>
<script type="text/javascript">
// Tests that when resource loads initiated by <img> elements are disallowed,
// the corresponding image is collapsed in the layout.

if (window.testRunner) {
  // Inject a subresource filter to disallow 'beta.png' (but not 'alpha.png').
  testRunner.setDisallowedSubresourcePathSuffixes(["beta.png"], true /* block_subresources */);
}

async_test(t => {
  let i = document.createElement("img");
  i.onload = t.step_func_done(_ => {
    assert_equals(i.clientWidth, 100, "Images that are not disallowed should be displayed at their natural width.");
    assert_equals(i.clientHeight, 100, "Images that are not disallowed should be displayed at their natural height.");
    let style = window.getComputedStyle(i);
    assert_equals(style.display, "inline", "Images that are not disallowed should be display:inline");
  });
  i.onerror = t.unreached_func();
  i.src = "resources/alpha.png";
  document.body.append(i);
}, "Images whose URLs are not disallowed should still be displayed as normal.");

async_test(t => {
  let i = document.createElement("img");
  i.onload = t.unreached_func();
  i.onerror = t.step_func_done(_ => {
    assert_equals(i.clientWidth, 0, "Images that are disallowed should be collapsed.");
    assert_equals(i.clientHeight, 0, "Images that are disallowed should be collapsed.");
    assert_equals(i.naturalWidth, 0, "Images that are disallowed should not be loaded.");
    assert_equals(i.naturalHeight, 0, "Images that are disallowed should not be loaded.");
    let style = window.getComputedStyle(i);
    assert_equals(style.display, "none", "Images that are disallowed should be set to display:none");
  });
  i.src = "resources/beta.png";
  document.body.append(i);
}, "Images whose initial URL is disallowed should not be loaded and should be collapsed in the layout.");

</script>
